<template>
  <div class="search-history">
    <van-cell title="搜索历史" >
      <div v-if="isDeleteShow">
      <span @click="$emit('update-histories',[])">全部删除</span>
        &nbsp;&nbsp;
      <span @click="isDeleteShow = false">完成</span>
       </div>
      <van-icon v-else @click="isDeleteShow=!isDeleteShow" name="delete" />
     
    </van-cell>
    <van-cell :title="item"
     v-for="(item, index) in searchHistories"
    :key="index"
    @click="onHistoryClick(item, index)"
    >
      <van-icon name="close"  @click="searchHistories.splice(index, 1)"  v-show="isDeleteShow" />
    </van-cell>
    
  </div>
</template>

<script>
import App from '@/App.vue'
import {getItem,setItem} from '@/utils/storage'
export default {
  name: 'SearchHistory',
  components: {App},
  props: {
    searchHistories:{
      type:Array,
       require:true
    }
  },
  data () {
    return {
      isDeleteShow:false
    }
  },
  computed: {},
  watch: {
 
  },
  created () {},
  mounted () {

  },
  methods: {
    onHistoryClick (item, index) {
  // 如果是删除状态，则执行删除操作
  if (this.isDeleteShow) {
    this.searchHistories.splice(index, 1)
     setItem('search-histories', this.searchHistories)
  } else {
    // 否则执行搜索操作
    this.$emit('search',item)
  }
}
  }
}
</script>

<style scoped lang="less"></style>